<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" th:href="@{/css/layui.css}" href="/css/layui.css" />
    <th:block th:include="include :: header('场景管理')" />
    <th:block th:include="include :: layout-latest-css" />
    <th:block th:include="include :: ztree-css" />
    <link
      rel="stylesheet"
      th:href="@{/css/scenario.css}"
      href="/css/scenario.css"
    />
  </head>
  <body>
    <div class="containers">
      <div class="leftCard">
        <div class="treebox search-collapse">
          <div id="test1"></div>
        </div>
        <div class="buttonCard">
          <div class="leftChart search-collapse">
            <div class="title">
              <p>数据统计饼状图</p>
            </div>
            <h3
              class="titleErr"
              style="text-align: center; line-height: 220px; display: none"
            >
              暂无数据
            </h3>
            <div class="echarsbox">
              <div id="cake" style="width: 100%; height: 240px"></div>
            </div>
          </div>
          <div class="rightChart search-collapse">
            <div class="title">
              <p>数据异常柱状图</p>
            </div>
            <h3
              class="titleErr"
              style="text-align: center; line-height: 220px; display: none"
            >
              暂无数据
            </h3>
            <div class="echarsbox">
              <div id="main" style="width: 95%; height: 240px"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="rightCard search-collapse table-striped">
        <table id="bootstrap-table1"></table>
      </div>
    </div>
    <script src="/js/echarts.min.js" th:href="@{/js/echart.min.js}"></script>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: layout-latest-js" />
    <th:block th:include="include :: ztree-js" />
  </body>
  <script src="/js/layui.js" th:href="@{/js/layui.js}"></script>
  <script>
    $(function () {
      $.ajax({
        url: "/youtian/scene-category/tree",
        type: "get",
        success: function (res) {
          console.log(res, "res");
          renderTree(res);
          renderChart();
          queryUserList();
        },
      });
    });

    // 场景右侧检测图表
    function renderChart(id) {
      $.ajax({
        url: `/youtian/scene-category/getSceneCategory?categoryId=${
          id ? id : "1"
        }`,
        type: "get",
        success: function (res) {
          console.log(res.data, "res.data");
          if (res.data.length <= 0) {
            $(".titleErr").css("display", "block");
            $(".echarsbox").css("display", "none");
            return;
          }else {
            $(".titleErr").css("display", "none");
            $(".echarsbox").css("display", "block");
          }
          let echartData = res.data;
          // 柱状图
          var chartDom = document.getElementById("main");
          var myChart = echarts.init(chartDom);
          var option;
          let echartY = [];
          let errorTagCount = [];
          let tagCount = [];
          echartData.forEach((item) => {
            echartY.push(item.sceneName);
            errorTagCount.push(item.errorTagCount);
            tagCount.push(item.tagCount);
          });
          console.log(echartData, echartY, errorTagCount, tagCount);
          option = {
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "shadow",
              },
            },
            legend: {},
            grid: {
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true,
            },
            xAxis: {
              type: "value",
              name: "数量",
            },
            yAxis: {
              type: "category",
              name: "场景名称",
              data: echartY,
            },
            series: [
              {
                name: "异常数量",
                type: "bar",
                stack: "total",
                label: {
                  show: true,
                },
                emphasis: {
                  focus: "series",
                },
                data: errorTagCount,
              },

              {
                name: "监测点数量",
                type: "bar",
                stack: "total",
                label: {
                  show: true,
                },
                emphasis: {
                  focus: "series",
                },
                data: tagCount,
              },
            ],
          };

          option && myChart.setOption(option);

          // 饼状图
          var chartDom = document.getElementById("cake");
          var myChart = echarts.init(chartDom);
          var option;
          option = {
            title: {
              text: "数据统计饼状图",
              left: "center",
            },
            tooltip: {
              trigger: "item",
            },
            legend: {
              orient: "vertical",
              left: "left",
            },
            series: [
              {
                name: "场景名称",
                type: "pie",
                radius: "50%",
                data: pieChartData(res.data),
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: "rgba(0, 0, 0, 0.5)",
                  },
                },
              },
            ],
          };
          $(".isShow").css({
            display: "none",
          });
          option && myChart.setOption(option);
        },
      });
    }

    // 场景右侧检测图表
    // function renderChart(id) {
    //   $.ajax({
    //     url: `/youtian/scene-category/getSceneCategory?categoryId=${
    //       id ? id : "1"
    //     }`,
    //     type: "get",
    //     success: function (res) {
    //       var ab = pieChartData(res.data);
    //       console.log(ab, "abdd");
    //       var progress_arr = res.data;
    //       let progress = document.getElementById("progres");
    //       let flag = false;
    //       progress.innerHTML = "";
    //       for (let i = 0; i < progress_arr.length; i++) {
    //         flag = true;
    //         progress.innerHTML += `<div class="text_progress clearfix">
    //                                 <div class="left" style="width: 25%;">
    //                                     <div class="text">
    //                                         <p style="font-size: 18px;"><span>异常数据: <span
    //                                             style="color: red; margin-left: 10px;">${
    //                                               progress_arr[i].errorTagCount
    //                                             }</span>/${
    //           progress_arr[i].tagCount
    //         }</span></p>
    //                                     </div>
    //                                 </div>
    //                                 <div class="right" style="width: 75%;">
    //                                     <div class="layui-progress layui-progress-big floatparent clearfix"
    //                                         style="background-color: #5dc1de;">
    //                                         <span class="showtext">${
    //                                           progress_arr[i].sceneName
    //                                         }</span>
    //                                         <div class="layui-progress-bar backred" style="width:${
    //                                           (progress_arr[i].errorTagCount /
    //                                             progress_arr[i].tagCount) *
    //                                           100
    //                                         }%">
    //                                         </div>
    //                                     </div>
    //                                 </div>
    //                             </div>`;
    //         $(".isShow").css({
    //           display: "none",
    //         });

    //         $(".echarsbox").css({
    //           display: "block",
    //         });
    //       }
    //       // 饼状图
    //       if (flag) {
    //         console.log(res.data, "res.data");
    //         var chartDom = document.getElementById("cake");
    //         var myChart = echarts.init(chartDom);
    //         var option;
    //         option = {
    //           tooltip: {
    //             trigger: "item",
    //           },
    //           legend: {
    //             top: "1%",
    //             left: "left",
    //             selectedMode: false,
    //             orient: "vercital",
    //           },
    //           series: [
    //             {
    //               name: "Access From",
    //               type: "pie",
    //               radius: ["40%", "70%"],
    //               avoidLabelOverlap: false,
    //               label: {
    //                 show: true,
    //                 position: "inner",
    //               },
    //               emphasis: {
    //                 label: {
    //                   show: true,
    //                   fontSize: "20",
    //                   fontWeight: "bold",
    //                 },
    //               },
    //               labelLine: {
    //                 show: false,
    //               },
    //               data: pieChartData(res.data),
    //             },
    //           ],
    //         };
    //         console.log(1123);
    //         $(".isShow").css({
    //           display: "none",
    //         });
    //         option && myChart.setOption(option);
    //       } else {
    //         $(".isShow").css({
    //           display: "block",
    //         });
    //         $(".echarsbox").css({
    //           display: "none",
    //         });
    //       }
    //     },
    //   });
    // }

    // 饼状图表格

    function queryUserList(id) {
      var options = {
        id: "bootstrap-table1",
        url: `/youtian/scene-category/scencePointlist/?sceneId=${
          id ? id : "1"
        }`,
        method: "get",
        showSearch: false,
        modalName: "用户",
        rowStyle: function (row, index) {
          var classes = ["bg-blue", "bg-green", "bg-red"];
          console.log(row, index, "index");
          if (row.dataState != "异常") {
            return {
              classes: classes[index / 2],
            };
          }
          return {
            css: {
              color: "red",
            },
          };
        },
        columns: [
          {
            checkbox: true,
            align: "center",
          },
          {
            field: "sceneName",
            title: "场景名称",
            align: "center",
          },
          {
            field: "pointName",
            title: "采集数据点位",
            align: "center",
          },
          {
            field: "upperLimit",
            title: "上限值",
            align: "center",
          },
          {
            field: "lowerLimit",
            title: "下限值",
            align: "center",
          },
          {
            field: "dataState",
            title: "数据状态",
            align: "center",
          },
          {
            field: "value",
            title: "采集值",
            align: "center",
          },
        ],
      };
      $.table.init(options);
    }

    var dataObj = {};
    // 渲染树组件
    function renderTree(res) {
      layui.use("tree", function () {
        var tree = layui.tree;
        //渲染
        var inst1 = tree.render({
          elem: "#test1", //绑定元素
          data: res.data,
          // edit: ['updata', 'del'],
          click: function (obj) {
            renderChart(obj.data.id);
            dataObj = obj.data;
            console.log("dianji ");
            $.table.destroy("bootstrap-table1");
            queryUserList(obj.data.id);
          },
        });
      });
    }

    // 计算比例
    function pieChartData(arr) {
      let total = arr.reduce((prev, next) => {
        return next.errorTagCount + prev;
      }, 0);
      var newArr = [];
      arr.forEach((item) => {
        var obj = {};
        obj.value = (item.errorTagCount / total).toFixed(2) * 100;
        obj.name = item.sceneName;
        newArr.push(obj);
      });
      return newArr;
      console.log(newArr, "newArr");
    }
  </script>
</html>
